<template>
  <view class="start-consulting">
    <view class="top-content">
      <!-- 问诊医生 -->
      <view class="u-body-item">
        <u-section :title="title1" :sub-title="startInfo.expertName" :show-line="false" :arrow="false"></u-section>
      </view>
      <!-- 选择值班场地 -->
      <view class="u-body-item">
        <u-section :title="title4" :sub-title="siteName" :show-line="false" @click="selectHandle3"></u-section>
      </view>
      <!-- 选择咨询人 -->
      <view class="u-body-item">
        <u-section :title="title2" :sub-title="visiterInfo.username" :show-line="false" @click="selectHandle2"></u-section>
      </view>
      <!-- 选择时间 -->
      <view class="u-body-item">
        <u-section :title="title3" :sub-title="subTitle" :show-line="false" @click="selectHandle"></u-section>
      </view>
    </view>
    <!-- 选择预约场地弹出框开始 -->
    <u-popup v-model="showPopup3" mode="bottom" height="678rpx">
      <view class="popup-content">
        <view class="close">
          <img src="@/static/img/pay/close.png" alt="" @tap="closeHandle3" />
        </view>
        <scroll-view scroll-y="true" style="height: 678rpx">
          <view class="uni-list">
            <radio-group @change="radioChange2">
              <label @tap.stop="chooiceSite(item)" class="uni-list-cell uni-list-cell-pd" v-for="item in siteList" :key="item.value">
                <view style="display: flex">
                  <radio color="#e64340" :value="item.value" />
                  <view style="margin-left: 10rpx">{{ item.siteName }}</view>
                </view>
              </label>
            </radio-group>
          </view>
        </scroll-view>
        <button type="warn" class="addPeople" @tap="addPerson">添加咨询人</button>
      </view>
    </u-popup>
    <!-- 选择预约咨询人弹出框开始 -->
    <u-popup v-model="showPopup2" mode="bottom" height="678rpx">
      <view class="popup-content">
        <view class="close">
          <img src="@/static/img/pay/close.png" alt="" @tap="closeHandle2" />
        </view>
        <scroll-view scroll-y="true" style="height: 678rpx">
          <view class="uni-list">
            <radio-group @change="radioChange">
              <label @tap.stop="checkVisit(item)" class="uni-list-cell uni-list-cell-pd" v-for="item in visitList" :key="item.value">
                <view style="display: flex">
                  <radio color="#e64340" :value="item.value" />
                  <view style="margin-left: 10rpx">{{ item.userId }}</view>
                </view>
                <view>{{ item.username }}</view>
              </label>
            </radio-group>
          </view>
        </scroll-view>
        <button type="warn" class="addPeople" @tap="addPerson">添加咨询人</button>
      </view>
    </u-popup>
    <!-- 选择预约时段弹出框开始 -->
    <u-popup v-model="showPopup" mode="bottom" height="678rpx">
      <view class="popup-content">
        <view class="close">
          <img src="@/static/img/pay/close.png" alt="" @tap="closeHandle" />
        </view>
        <view class="popup-title">
          <text>选择预约时段</text>
        </view>
        <scroll-view scroll-y="true" style="height: 640rpx">
          <timeMenu :tabbar="tabbar" :activeStyle="activeStyle" :commonStyle="commonStyle" :expertId="expertId" :dateArr="dateArr" :siteId="siteId" @check="checktime"></timeMenu>
        </scroll-view>
      </view>
    </u-popup>

    <!-- 选择预约时段弹出框结束 -->
    <u-button type="error" @click="submit" :custom-style="customStyle" shape="circle">确认挂号</u-button>
  </view>
</template>

<script>
import timeMenu from './timeMenuComponent.vue'
import { API } from '../../../config/myApi.js'
export default {
  components: {
    timeMenu
  },
  onLoad(option) {
    console.log('咳咳咳', option)
    this.startInfo.expertName = option.expertName
    if (option.siteName !== 'undefined') {
      this.siteName = option.siteName
    }
    if (option.siteId !== 'undefined') {
      this.siteId = option.siteId
    }
    this.price = option.consultPrice
    this.siteAddress = option.siteAddress
    this.week = option.week
    this.expertId = option.expertId
    this.getDate()
  },
  onShow() {
    this.getVisit()
  },
  // watch: {
  //   showPopup2(val) {
  //     console.log(val);
  //     if (val == true) {
  //       this.selectHandle2();
  //     }
  //   },
  // },
  data() {
    return {
      subTitle: '选择预约时间',
      week: 0,
      expertId: '',
      siteId: '',
      visitList: [],
      siteRoomTimeId: '',
      visiterInfo: {},
      siteAddress: '',
      checkTime: '',
      price: 0,
      startInfo: {},
      title1: '问诊医生',
      title2: '选择咨询人',
      title3: '选择时间',
      title4: '选择专家值班场地',
      //弹出层显示
      showPopup: false,
      showPopup2: false,
      showPopup3: false,
      //输入框数据
      inputValue: '',
      placeholder: '为了获得更好的帮助，请尽可能的描述您的基本情况，病情描述不得少于10个字',
      type: 'textarea',
      border: false,
      height: 300,
      autoHeight: true,
      clearable: false,

      action: 'http://www.example.com/upload', //上传图片的地址
      fileList: [
        // 	{
        // 	url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
        // } ,
      ], //上传图片的数组
      //添加咨询人
      addStyle: {
        position: 'absolute',
        left: '30rpx',
        bottom: '30rpx',
        width: '690rpx',
        height: '90rpx'
      },
      value: 'orange',
      //确认咨询样式
      customStyle: {
        position: 'fixed',
        bottom: '30rpx',
        width: '690rpx',
        height: '90rpx'
        // zIndex: 20000
      },
      // 预约时间的样式
      tabbar: [], //时间数据
      activeStyle: {
        //
        width: '200rpx',
        height: '110rpx',
        background: '#F4333C',
        borderRadius: '10rpx',
        padding: '0',
        color: '#fff',
        marginBottom: '30rpx'
      },
      commonStyle: {
        //普通样式
        width: '200rpx',
        height: '110rpx',
        border: '1px solid #D5D5D5',
        borderRadius: '10rpx',
        padding: '0',
        marginBottom: '30rpx'
      },
      dateArr: [],
      siteList: [],
      siteName: ''
    }
  },
  methods: {
    // 选择星期几
    change(v) {
      this.week = this.tabbar[v].id
      let data = {
        expertId: this.expertId,
        siteId: this.siteId,
        week: this.week
      }
      API.getExpertTime(data).then((res) => {
        this.$set(this.tabbar[this.week], 'dateArr', res.result)
        this.tabbar[this.week].dateArr.forEach((v) => {
          v.time = v.timeSlot
          v.count = v.remainder
        })
      })
    },

    // 选择时间段
    checktime(v, i) {
      this.subTitle = v.timeSlot
      this.siteRoomTimeId = v.siteRoomTimeId
      v.select = true
      this.showPopup = false
    },
    // 获取初始挂号时间
    getTime() {
      let data = {
        expertId: this.expertId,
        siteId: this.siteId,
        week: this.week
      }
      API.getExpertTime(data).then((res) => {
        if (res.success) {
          console.log(res.result)
          this.dateArr = res.result
        }
        // this.tabbar[0].dateArr = res.result;
        // this.tabbar[0].dateArr.forEach((v) => {
        //   v.time = v.timeSlot;
        //   v.count = v.remainder;
        // });
      })
    },
    // 添加咨询人
    checkVisit(item) {
      this.visiterInfo = item
      console.log(this.visiterInfo)
      this.visitCardNo = this.visiterInfo.visitCardNo
    },
    chooiceSite(item) {
      console.log(item)
      this.siteName = item.siteName
      this.siteId = item.id
    },
    addPeople() {
      // this.visiterInfo = item
      // this.showPopup2 = true;
    },
    getDate() {
      this.tabbar = []
      const date = new Date()
      const dayTime = 24 * 60 * 60 * 1000
      const times = date.getTime()
      for (let i = 0; i < 7; i++) {
        const day = new Date(times + dayTime * i).getDay()
        const date = new Date(times + dayTime * i).getDate()
        const month = new Date(times + dayTime * i).getMonth()
        // const year = new Date(times + dayTime * i).getFullYear()
        if (day == 1) {
          this.tabbar.push({
            day: '周一',
            date: date,
            month: month + 1,
            id: day
          })
        } else if (day == 2) {
          this.tabbar.push({
            day: '周二',
            date: date,
            month: month + 1,
            id: day
          })
        } else if (day == 3) {
          this.tabbar.push({
            day: '周三',
            date: date,
            month: month + 1,
            id: day
          })
        } else if (day == 4) {
          this.tabbar.push({
            day: '周四',
            date: date,
            month: month + 1,
            id: day
          })
        } else if (day == 5) {
          this.tabbar.push({
            day: '周五',
            date: date,
            month: month + 1,
            id: day
          })
        } else if (day == 6) {
          this.tabbar.push({
            day: '周六',
            date: date,
            month: month + 1,
            id: day
          })
        } else if (day == 0) {
          this.tabbar.push({
            day: '周日',
            date: date,
            month: month + 1,
            id: 7
          })
        }
      }
      this.tabbar.forEach((v) => {
        v.date = `${v.month}-${v.date} ${v.day}`
      })
      this.week = this.tabbar[0].id
      // this.getTime();
    },
    //点击选择预约时间，显示
    selectHandle() {
      this.showPopup = true
      this.getTime()
    },
    selectHandle2() {
      this.showPopup2 = true
      this.getVisit()
      // API.getVisitList().then((res) => {
      //   this.visitList = res.result;
      // });
    },
    selectHandle3() {
      this.showPopup3 = true
      this.getList()
    },
    // 获取场地列表
    getList() {
      let data = {
        expertId: this.expertId
      }
      console.log(data)
      API.getsiteList(data).then((res) => {
        if (res.success) {
          this.siteList = res.result
        }
      })
    },
    // 获取咨询人列表
    getVisit() {
      API.getVisitList().then((res) => {
        if (res.success) {
          this.visitList = res.result
        }
      })
    },
    // 关闭弹出框
    closeHandle() {
      this.showPopup = false
    },
    // 关闭弹出框
    closeHandle2() {
      this.showPopup2 = false
    },
    // 关闭弹出框
    closeHandle3() {
      this.showPopup3 = false
    },
    // 选中某个单选框时，由radio时触发
    radioChange(v) {
      console.log(v)
      this.showPopup2 = false
    },
    // 选中某个单选框时，由radio时触发
    radioChange2(v) {
      console.log(v)
      this.showPopup3 = false
    },
    addPerson() {
      // console.log("添加咨询人");
      uni.navigateTo({
        url: '/pages/addPatient/addPatient'
      })
    },
    submit() {
      let data = {
        expertName: this.startInfo.expertName,
        visitName: this.visiterInfo.username,
        sex: this.visiterInfo.sex,
        age: this.visiterInfo.age,
        visitTime: this.subTitle,
        visitCardNo: this.visitCardNo,
        siteAddress: this.siteAddress,
        price: this.price
      }
      // uni.navigateTo({
      //   url: `/pages/mine/myRegister/payRegister?data=${JSON.stringify(data)}`, //预约挂号支付
      // });
      console.log(data)
      if (this.price == 0) {
        let data = {
          expertId: this.expertId,
          siteId: this.siteId,
          userId: this.userId,
          siteRoomTimeId: this.siteRoomTimeId,
          visitCardNo: this.visiterInfo.visitCardNo
        }
        API.addRegistered(data).then((res) => {
          if (res.success) {
            uni.showToast({
              title: '添加成功',
              duration: 2000
            })
            this.visiterInfo.username = ''
            this.subTitle = ''
          }
        })
      } else {
        uni.navigateTo({
          url: `/pages/mine/myRegister/payRegister?data=${JSON.stringify(data)}` //预约挂号支付
        })
      }
    }
    // 模态框
  }
}
</script>

<style lang="scss" scoped>
$r24: 24rpx;

.start-consulting {
  padding: $r24 30rpx;
}
.top-content {
  width: 100%;
  height: auto;
  background: #ffffff;
  border-radius: 14rpx;
  margin: 0 auto $r24;
  padding: 0 $r24;

  .u-body-item {
    display: flex;
    align-items: center;
    height: 109rpx;
    font-size: 32rpx;
    color: #333;
    padding: 20rpx 10rpx;
    border-bottom: 1px solid #e3e3e3;

    &:last-child {
      border-bottom: none;
    }

    //隐藏第一个箭头
    // /deep/.u-icon__icon::before:first-child{
    // 	color: transparent !important;
    // }
  }
}

// 模态框
/deep/.u-drawer-content {
  border-radius: 20px 20px 0px 0px;
  overflow: hidden;

  .popup-content {
    padding: 32rpx 30rpx;
    background: #ffffff;
    position: relative;
    .addPeople {
      position: fixed;
      bottom: 6rpx;
      right: 70rpx;
      width: 80%;
    }
    .close {
      display: flex;

      > img {
        margin-left: auto;
        width: 28rpx;
        height: 28rpx;
      }
    }

    .popup-title {
      text-align: center;
      font-size: 34rpx;
      font-weight: bold;
      color: #333333;
      padding-bottom: 40rpx;
    }
  }
}
.uni-list-cell {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}
/deep/.uni-radio-input.uni-radio-input-checked:before {
  display: none;
}
</style>
